<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="30%"
      title="导入"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="24">
          <!-- <FileUpload
            :drag="true"
            :fileType="fileType"
            :fileSize="fileSize"
            @input="getFilelist"
            :url="upurl"
          /> -->
          <el-upload
            ref="upload"
            :limit="5"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :auto-upload="false"
            drag
            class="upload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip text-center" slot="tip">
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link
                type="primary"
                :underline="false"
                style="font-size: 12px; vertical-align: baseline"
                @click="handleDownload"
                >下载模板</el-link
              >
            </div>
          </el-upload>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-link type="primary" @click="handleDownload">
            <em>点击下载模板</em>
          </el-link>
        </el-col>
      </el-row> -->
      <form-button
        slot="footer"
        cancel-text="关闭"
        submitText="导入"
        :show-submit-button="true"
        @cancel="handleClose"
        @submit="handleSubmit"
      ></form-button>
    </zeda-dialog>
  </div>
</template>

<script>
import FormButton from "@/components/FormButton";
import FileUpload from "@/components/FileUpload";
import { exportExecl } from "@/utils/export-execl";
import { gettTemplatedownload } from "@/api/standingbook/common.js";
import { getToken } from "@/utils/auth";
export default {
  components: {
    FormButton,
    FileUpload,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: "",
      },
      // upurl: "",
      // fileType: ["xlsx", "xls"],
      // fileSize: 10,
    };
  },
  created() {
    // 阻止火狐浏览器拖拽上传文件弹出新窗口
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        // this.getInfo();
        if (this.id == "bulk1") {
          this.upload.url =
            process.env.VUE_APP_BASE_API + "/system/institutions/importData";
        }
      }
    },
  },
  methods: {
    // getFilelist(data) {
    //   console.log(data, "文件信息");
    // },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      // console.log(event, file, fileList);
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      // console.log(response, file, fileList, "成功回调");
      this.upload.open = false;
      this.upload.isUploading = false;
      // this.$refs.upload.clearFiles();
      if (response.code == 700) {
        this.$message.warning(response.msg);
      } else {
        this.$message({
          type: "success",
          message: "导入成功!",
        });
      }
      // this.$alert(
      //   "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      //     response.msg +
      //     "</div>",
      //   "导入结果",
      //   { dangerouslyUseHTMLString: true }
      // );
    },
    // 文件上传失败处理
    handleFileError(response, file, fileList) {
      // console.log(response, file, fileList, "失败回调");
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.code == 700) {
        this.$message.warning(response.msg);
      } else {
        this.$message.error("导入失败!");
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 下载模板
    handleDownload() {
      if (this.id == "bulk1") {
        // 公共机构
        const params = {};
        exportExecl(
          "公共机构模板",
          "/system/institutions/template/download",
          params,
          this
        );
      } else if (this.id == "bulk2") {
        // 能源资源
      }
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
    handleSubmit() {
      this.submitFileForm();
      this.handleClose(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  text-align: center;
}
</style>
